<template>
    <div>
      <template>
        <div>
          <input type="text" placeholder="请输入用户名" v-model="obj.mobile" />
          <input type="password" placeholder="请输入密码" v-model="obj.password" />
          <input type="password" placeholder="请输入确认密码" v-model="obj.confirmPassword" />
          <button v-on:click="register">注册</button>

          <!-- <p v-on:click="ToLogin">已有账号？马上登录</p> -->
          <p>
            <span @click="backLogin">已有账号？马上登录</span>
          </p>
          <br />
          <!-- <router-link to="/">返回</router-link> -->
        </div>
      </template>


    </div>
</template>

<script>

    import {register} from '../api/api.js'

    export default {
        name: "register",
        data() {
            return {

             obj:{
               mobile:'',
               password:'',
               confirmPassword:'',
             }
            }
        },
        components: {},
        watch: {},
        mounted() {

        },
        methods: {
          backLogin:function()
          {
            this.$emit('backLogin')
          },
          register:function () {
            register(this.obj).then(res=>{
                 console.log("res",res);
              this.$emit('backLogin')
                  })
          }
        },

    }
</script>

<style scoped>

  .login-wrap {
    text-align: center;
  }

  h3 {
    text-align: center;
  }
  span {
    text-align: center;
  }
  input {
    display: block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    margin-bottom: 10px;
    outline: none;
    border: 1px solid #888;
    padding: 10px;
    box-sizing: border-box;
  }

  p {
    color: red;
    text-align: center;
  }

  button {
    display: block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    border: none;
    background-color: #41b883;
    color: #fff;
    font-size: 16px;
    margin-bottom: 5px;
  }

  span {
    cursor: pointer;
  }

  span:hover {
    color: #41b883;
  }
</style>

